//初始弹窗页面适配
var popupW = document.getElementsByClassName("popupW")[0],
	popupW2 = document.getElementsByClassName("popupW2")[0],
	web = document.getElementsByClassName("web")[0],
	body = document.querySelector("body");
var seatInfo = document.getElementsByClassName("seatInfo")[0];
var seatNum = seatInfo.getElementsByClassName("seatNum")[0];
window.onload = function() {
	popupW.style.width = body.offsetWidth + "px";
	popupW.style.height = body.offsetHeight + "px";
	popupW2.style.width = body.offsetWidth + "px";
	popupW2.style.height = body.offsetHeight + "px";

}

//初始弹窗点击效果
var title = popupW.getElementsByClassName("title")[0],
	chooseSeat = popupW.getElementsByClassName("chooseSeat")[0],
	rank = popupW.getElementsByClassName("rank")[0],
	applica = popupW.getElementsByClassName("application")[0],
	closePopup = popupW.getElementsByClassName("closePopup")[0],
	closePopup2 = popupW2.getElementsByClassName("closePopup")[0];

chooseSeat.addEventListener("click", function() {
	popupW.style.display = "none";
})
closePopup.addEventListener("click", function() {
	popupW.style.display = "none";
})
closePopup2.addEventListener("click", function() {
	popupW2.style.display = "none";
})

////添加新桌效果
var newGuestBox = web.getElementsByClassName("newguestbox"),
	n = 0;
var addnewTab = function(obj) {
	var blankchair = document.getElementsByClassName("icon-jiahao");
	event.stopPropagation();
	if(blankchair.length > 7) {
		alert("还有空位置")
	} else {
		web.innerHTML += '<div class="newguestbox guestbox" onclick="addnewTab()"><div class="guest"><div class="table"><p>+</p></div><div class="chair"><i class="iconfont icon-jiahao"></i></div><div class="chair"><i class="iconfont icon-jiahao"></i></div><div class="chair"><i class="iconfont icon-jiahao"></i></div><div class="chair"><i class="iconfont icon-jiahao"></i></div><div class="chair"><i class="iconfont icon-jiahao"></i></div><div class="chair"><i class="iconfont icon-jiahao"></i></div></div></div>';
		newGuestBox[n].setAttribute("onclick", "seatChoose(this)");
		var tableNum = newGuestBox[n].getElementsByTagName("p")[0];
		tableNum.innerText = "第" + (n + 5) + "席";
		n += 1;
	}
}

//分享弹窗页面
var sharebox = document.getElementsByClassName("sharebox")[0],
	shareLogo = document.getElementsByClassName("shareLogo")[0];

shareLogo.addEventListener("click", function() {
	popupW2.style.display = "block";
})

//音乐按钮
var musicBtn = document.getElementsByClassName("musicButton")[0],
	audio1 = document.getElementById("music1"),
	musicLogo = musicBtn.getElementsByClassName("musicLogo")[0],
	judge1 = true;

musicBtn.addEventListener("click", function() {
	if(audio1.paused && judge1) {
		audio1.play();
	} else {
		audio1.pause();
	}
})
musicLogo.addEventListener("click", function() {
	judge1 = !judge1;
	if(judge1) {
		musicLogo.style.animationPlayState = "running";
	} else {
		musicLogo.style.animationPlayState = "paused";
	}
})

//点击选座
var seatChoose = function(obj) {
	var host = document.getElementsByClassName("host")[0],
		guestbox = document.getElementsByClassName("guestbox"),
		webtext = web.getElementsByClassName("text")[0];
	//点击后其他桌消失	
	host.style.opacity = "0";
	shareLogo.style.opacity = "0";
	musicBtn.style.opacity = "0";
	webtext.style.opacity = "0";
	seatInfo.style.opacity = "0";
	host.setAttribute("onclick", "")
	for(var i = 0; i < guestbox.length; i++) {
		guestbox[i].style.opacity = "0";
		guestbox[i].setAttribute("onclick", "")
	}
	obj.style.opacity = "1";

	//点击对象动画至屏幕中间
	var y = document.documentElement.clientHeight, //获取可视区域宽度
		x = document.documentElement.clientWidth;
	obj.style.transform = "translateY(" + (-obj.offsetTop + y * 0.5 - obj.offsetHeight * 0.5) + "px) translateX(" + (-obj.offsetLeft + x * 0.5 - obj.offsetWidth * 0.5) + "px) scale(2)";

	//点击改变椅子图标,弹出预订信息
	var chairs = obj.getElementsByClassName("chair");
	var chairFun = function(j) {
		var icon = chairs[j].getElementsByClassName("iconfont")[0];
		icon.classList.remove("icon-jiahao");
		icon.classList.add("icon-wo");
	}
	for(let j = 0; j < chairs.length; j++) {
		chairs[j].style.animationName = "chairsJump";
		chairs[j].addEventListener("click", function() {
			event.stopImmediatePropagation();
			var icon = chairs[j].getElementsByClassName("iconfont")[0];
			if(icon.classList.contains("icon-wo")) {
				alert("此位置已被预订,请选择")
			} else {
				chairFun(j);
				alert("您成功预订" + (guestbox.length - 1) + "席" + (j + 1) + "位")
				seatNum.innerHTML += "已预订" + (guestbox.length - 1) + "席" + (j + 1) + "位</br>";
			}
		})
	}

	//点击web使画面复原
	event.stopPropagation();
	event.stopImmediatePropagation();
	web.addEventListener("click", function() {
		host.style.opacity = "1";
		shareLogo.style.opacity = "1";
		musicBtn.style.opacity = "1";
		webtext.style.opacity = "1";
		seatInfo.style.opacity = "1";
		host.setAttribute("onclick", "");
		for(var i = 0; i < guestbox.length; i++) {
			guestbox[i].style.opacity = "1";
			guestbox[i].setAttribute("onclick", "seatChoose(this)")
		}
		var m = guestbox.length;
		guestbox[m - 1].setAttribute("onclick", "addnewTab(this)")
		obj.style.transform = "scale(1)"
		for(var k = 0; k < chairs.length; k++) {
			chairs[k].style.animationName = "noJump";
			chairs[k].removeEventListener("click", function() {
				event.stopImmediatePropagation();
				var icon = chairs[j].getElementsByClassName("iconfont")[0];
				if(icon.classList.contains("icon-wo")) {
					alert("此位置已被预订,请选择")
				} else {
					chairFun(j);
					alert("您成功预订" + (guestbox.length - 1) + "席" + (j + 1) + "位")
					seatNum.innerHTML += "已预订" + (guestbox.length - 1) + "席" + (j + 1) + "位</br>";
				}
			})
		}
		var ojbk = setTimeout(function() {
			seatNum.innerHTML = "&nbsp";
		}, 2000)
	})
}